<template>
  <div class="header">
      <div class="l-content">
          <el-button @click="asideMenu()" plain icon="el-icon-s-unfold" size="mini"></el-button>
          <h2 style="font-size: 2em; margin-right: 50px; color: #ffffff;">智慧医疗手诊系统</h2>
          <hr>
          <p v-if="caseNo" style="color: white; font-size: 2em; font-weight: bold; font-family: 'SimSun', serif;">用户：{{ caseNo }}</p>
      </div>
      <div class="container">
          <el-button type="danger" @click="logout">退出登录</el-button>
      </div>
  </div>
</template>

<script>
import { mapState } from "vuex";
export default {
  name: 'CommonHeader',
  data() {
      return {
          msg: "000",
          caseNo: localStorage.getItem("caseNo"),
      }
  },
  methods: {
      asideMenu() {
          this.$store.commit("collapseMenu");
      },
      logout() {
          window.localStorage.clear();
          alert("退出登录");
          this.$message({
              message: "成功退出登录",
              type: "success",
          });
          this.$router.push({
              name: "Login",
          });
      },
  },
  created() {
      console.log("caseNo", this.caseNo);
  }
};
</script>

<style scoped>
.header {
  display: flex;
  height: 120%;
  justify-content: space-between;
  align-items: center;
  background-color: #21331e; /* 深色背景 */
  padding: 0px 20px;
  box-shadow: 0 0 15px rgba(0, 0, 0, 0.1) inset, 0 8px 32px rgba(0, 0, 0, 0.5);
  transform: translateY(-2px);
  border-radius: 10px;
  margin-top: 10px;
}

.header::before {
  content: "";
  position: absolute;
  bottom: -2px;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(to right, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0));
  border-radius: 0 0 10px 10px;
}

.l-content {
  display: flex;
  align-items: center;
}

.l-content h2 {
  margin-left: 12px;
  margin-right: 12px;
  float: left;
  font-size: larger;
  font-weight: bolder;
  color: #87c38b; /* 浅绿色文字 */
}

.el-button {
  background-color: #96c698; /* 绿色按钮背景 */
  border-color: #7fb181;
  color: #fdfcfc;
  font-size: 1em;
}

.el-button:hover,
.el-button:focus {
  background-color: #66BB6A; /* 更鲜艳的绿色 */
  border-color: #66BB6A;
}

.el-button--danger {
  background-color: #F44336;
  border-color: #F44336;
}

.el-button {
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.18);
  transition: all 0.3s ease;
}

.el-button:hover {
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.24);
}
</style>